<template>
  <div class="orderMonthEchar">
    <!-- 图表显示区域 -->
    <div id="orderMonthEchar" style="height: 400px;"></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import * as HomeAPI from '@/api/home.js';

import { ref, onMounted} from 'vue';

const year = 2022;
   
// 生命周期方法
onMounted(()=>{
	dispEchar();
})
const dispEchar = async () => {
  let result = await HomeAPI.queryOrderSumByMonth(year)
	console.log(result)
  const xAxisData = result.data.map(item => item.month);
  const series1Data = result.data.map(item => item.count);
  const series2Data = result.data.map(item => item.amount);
  intiEchar(year, xAxisData, series1Data, series2Data); 
};

  
    //初始图表：统计商品月度销售
const intiEchar = (year, xAxisData, series1Data, series2Data) => {
      if (xAxisData.length == 0) {
        console.log('图表的数据还没有准备好!');
        return 0;
      }
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('orderMonthEchar'));
      // 绘制图表
      myChart.setOption({
        //语言：中文
        locale: 'ZH',
        //标题
        title: {
          text: year + '年商品月度销售统计',
          left: '20%'
        },
        //提示
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        //网格
        grid: {
          left: '3%',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },
        //图例
        legend: {
          orient: 'horizontal', // Try 'vertical'
          right: 'center',
          top: 30
        },
        //X轴
        xAxis: {
          data: xAxisData
        },
        //Y轴
        yAxis: [
          {
            type: 'value',
            name: '数量',
            position: 'right'
          },
          {
            type: 'value',
            name: '金额',
            position: 'left',
            alignTicks: true,
            axisLabel: {
              formatter: '￥{value}'
            }
          }
        ],
        //系列
        series: [
          {
            name: '数量',
            type: 'line',
            smooth: true,
            yAxisIndex: 0,
            data: series1Data
          },
          {
            name: '金额',
            type: 'line',
            smooth: true,
            yAxisIndex: 1,
            data: series2Data
          }
        ]
      });

      window.addEventListener('resize', () => {
        myChart.resize();
      });
   
};

</script>

<style scoped></style>
